<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en" lang="en">
<head>
<title>Mandelbrot Set Viewer</title>
<link rel="icon" type="image/png" href="/images/icon.png" />
<link rel="apple-touch-icon" href="/images/icon.png" />
<link rel="stylesheet" type="text/css" href="main.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/lib/beta/js/json2.min.js"></script>
<script type="text/javascript" src="/lib/beta/js/utils.js"></script>
<script type="text/javascript" src="/static/src/js/vector.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="mandelbrot.js"></script>
<script type="text/javascript" src="tiles.js"></script>
<script type="text/javascript">
var main = namespace.lookup("com.pageforest.mandelbrot.main");
$(document).ready(main.onReady);
</script>
</head>
<body>
<div class="page">
<h1><script type="text/javascript">document.write(document.title);</script></h1>
<div class="signin">
  <input type="button" id="signin" onclick="main.signInOut()" value="Sign in"/>
  <p>Current username: <span id="username"></span></p>
</div>

<fieldset>
  <div id="map_canvas"></div>

  <br/><canvas id="level-key" width="256" height="20"></canvas>

  <div class="save-bar">
    <input type="button" onclick="main.client.detach();" value="Make a Copy"/>
    <input id="save" type="button" onclick="main.client.save();" value="Save"/>
  </div>
  <p><i>Document is <span id="doc-state">clean</span>.</i></p>

  <div class="admin">
    <input type="button" onclick="main.createBlobDoc();" value="Create Blob Document"/>
  </div>
</fieldset>

<fieldset>
  <legend>Tile Statistics</legend>
  <p>Downloaded: <span id="loaded"></span></p>
  <p>Rendered: <span id="rendered"></span></p>
  <p>Backlog: <span id="backlog"></span></p>
</fieldset>

<fieldset>
  <legend>Explore</legend>
  <p>This application demonstrates some powerful HTML5 features (Canvas, Web Workers), as well
    as use of the Pageforest JavaScript platform to implement Tile Caching and collaborative
    computation.
  </p>
  <ol>
    <li><a href="fullscreen.html">Fullscreen</a> - Use the entire browser window.</li>
    <li><a target="_blank" href="http://en.wikipedia.org/wiki/Mandelbrot_set">The Mandelbrot Set</a>
      - Learn more about the Mandelbrot set on Wikipedia.</li>
    <li><a target="_blank" href="test-runner.html">Unit Tests</a>
      - Run the Unit Test Suite for this appliction.</li>
    <li><a target="_blank" href="http://code.google.com/p/pageforest/source/browse/#hg/examples/mandelbrot">Source code</a>
      - View the code for this application.</li>
    <li><a target="_blank" href="http://code.google.com/p/pageforest/wiki/GettingStarted">Getting Started</a>
      - How to get started with the Pageforest API.</li>
  </ol>
</fieldset>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2072869-7']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</div> <!-- page -->
</body>
</html>
